<script>

import box from '@/mixins/box'

export default {
  name: 'my-house',
  mixins: [box],
  methods: {},
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    btnText: String,
    house: Object,
  },
}
</script>

<template>
  <view class="my-house-container"
        :style="{filter: disabled ? 'contrast(130%) brightness(0.7)' : '',
         backgroundImage: `url(https://www.dingxians.cn/upload/images/welfare/bg-welfare-housing${this.house.is_official ? '2' : ''}.png)`}"
        @click="$emit('btnClick')">
    <view class="title">{{ house.name }}</view>
    <view class="user">
      <image class="avatar" :src="house.avatar"></image>
      <text class="username">{{ house.nickname }}</text>
    </view>
    <view class="goods-list">
      <view class="goods-item" v-for="item in house.prize_list" :key="item.id">
        <image class="goods-img" :src="item.image" mode="aspectFit"></image>
      </view>
    </view>
    <view class="house-info">
      <view class="goods-count">{{ house.prize_num }}件</view>
      <view class="people-num">{{ house.begin_reward_num }}人</view>
    </view>
    <view class="join-house btn-primary">{{ btnText }}</view>
  </view>
</template>

<style scoped lang="scss">
.my-house-container {
  width: 345rpx;
  height: 462rpx;
  box-sizing: border-box;
  background-size: 100% 100%;
  margin-bottom: 20rpx;
  padding: 18rpx 32rpx 45rpx;
  color: white;

  .title {
    text-align: center;
    font-weight: bold;
    font-size: 36rpx;
    font-family: 'youshe', serif;
  }

  .user {
    margin-top: 45rpx;
    display: flex;
    align-items: center;

    .avatar {
      width: 44rpx;
      height: 44rpx;
      border-radius: 50%;
    }

    .username {
      font-size: 26rpx;
      margin-left: 10rpx;
    }
  }

  .goods-list {
    margin-top: 16rpx;
    display: flex;
    width: 280rpx;
    min-height: 88rpx;
    /*justify-content: space-between;*/
    overflow-x: scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    .goods-item {
      flex-shrink: 0;
      width: 88rpx;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8rpx;
      /*background-image: url("https://www.dingxians.cn/upload/images/welfare/bg-goods.png");*/
      background-size: 100% 100%;

      &:last-child {
        margin-right: 0;
      }

      .goods-img {
        height: 72rpx;
        width: 72rpx;
      }
    }
  }

  .house-info {
    margin-top: 55rpx;
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    align-items: center;
  }

  .join-house {
    width: 165rpx;
    height: 62rpx;
    line-height: 62rpx;
    text-align: center;
    margin: 34rpx auto 0;
    font-size: 22rpx;
    font-weight: bold;
  }
}
</style>